<script setup lang="ts">
import ChiGroup from '@/components/tiles/self/group/ChiGroup.vue'
import PengGroup from '@/components/tiles/self/group/PengGroup.vue'
import MingGangGroup from '@/components/tiles/self/group/MingGangGroup.vue'
import AnGangGroup from '@/components/tiles/self/group/AnGangGroup.vue'
import HuaGroup from '@/components/tiles/self/group/HuaGroup.vue'
const props = defineProps({
  // 牌组
  groups: {type: Array, required: false, default: []}
})
props.groups.reverse();
</script>

<template>
  <div class="owned-tiles-groups">
    <template v-for="(value) in props.groups">
      <template v-if="(value as any).type == 'CHI'">
          <ChiGroup :tiles="(value as any).tiles"></ChiGroup>
      </template>
      <template v-else-if="(value as any).type == 'PENG'">
          <PengGroup :tile="(value as any).tiles[0]"></PengGroup>
      </template>
      <template v-else-if="(value as any).type == 'MING_GANG'">
          <MingGangGroup :tile="(value as any).tiles[0]"></MingGangGroup>
      </template>
      <template v-else-if="(value as any).type == 'AN_GANG'">
          <AnGangGroup :tile="(value as any).tiles[0]"></AnGangGroup>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.owned-tiles-groups{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  div:not(:first-child) {
    margin-left: 5px;
  }
}
</style>
